<template>
  <div class="app-container">
    <!-- <mainTilte title="供应商管理"></mainTilte> -->
    <div class="mb10">
      <form-selections :is-active="isActive" :items="formItems" :query-param.sync="searchParams" display="block" @handleSearch="handleSearch" />
    </div>
    <div class="select_flex">
      <div class="operation_button_box mb10">
        <el-button v-action="'transhipmentOrder@changeAuditStatus'" size="small" type="primary" @click="bulkShipment">出运单审核</el-button>
        <el-button v-action="'transhipmentOrder@subOrders'" size="small" type="primary" @click="openList">预分仓</el-button>
        <el-button v-action="'transhipmentOrder@confirmArrive'" size="small" type="primary" @click="arrivalClick">到仓确认</el-button>
        <el-button v-action="'transhipmentOrder@confirmSubOrders'" size="small" type="primary" @click="preDistributionClick">预分仓确认</el-button>
        <el-button v-action="'transhipmentOrder@export'" size="small" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
      </div>
      <div>
        <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>
        <el-button size="small" class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
          重置
        </el-button>
        <el-button size="small" @click="isActive=!isActive">{{ isActive?'展开':'收起' }}</el-button>
      </div>
    </div>

    <div class="page-grid">
      <!-- <div class="operation_button_box mb10">
        <el-button v-action="'transhipmentOrder@changeAuditStatus'" size="small" type="primary" @click="bulkShipment">出运单审核</el-button>
        <el-button v-action="'transhipmentOrder@subOrders'" size="small" type="primary" @click="openList">预分仓</el-button>
        <el-button v-action="'transhipmentOrder@confirmSubOrders'" size="small" type="primary" @click="arrivalClick">到仓确认</el-button>
        <el-button v-action="'transhipmentOrder@confirmArrive'" size="small" type="primary" @click="preDistributionClick">预分仓确认</el-button>
        <el-button v-action="'transhipmentOrder@export'" size="small" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
      </div> -->
      <egrid
        v-loading="loading"
        class="egrid"
        :screen-heigh="screenHeigh"
        stripe
        fit
        border
        highlight-current-row
        element-loading-text="正在努力加载中..."
        :column-type="['selection']"
        :data="tableData"
        :columns="columns"
        :columns-schema="columnsSchema"
        :columns-handler="columnsHandler"
        @selection-change="checkIds"
      />
      <epagination
        v-if="tableData"
        :total="total"
        :current="searchParams.page"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <!-- 出运单审核 -->
    <el-dialog
      v-if="dialogAddVisible"
      v-loading.lock="loading"
      v-loading="loading"
      :title="title"
      :visible.sync="dialogAddVisible"
      :close-on-click-modal="false"
      width="60%"
      class="dialogText header-none"
      :element-loading-text="loadingText"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      center
    >
      <div v-loading="dialogVisible">
        <el-form v-if="dialogAddVisible" ref="form" :model="auditForm" label-width="100px">
          <el-row>
            <mainTilte title="出运单基本信息" />
          </el-row>
          <billForm :form-data="auditForm" />
        </el-form>
        <el-row>
          <mainTilte title="转运商品明细信息" />
        </el-row>
        <el-table :data="auditForm.products" stripe fit border class="mb10">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="purchase_order_code" label="采购单号" width="180" align="center" />
          <el-table-column prop="contract_code" label="合同号" width="180" align="center" />
          <el-table-column prop="goods_code" label="系统sku" width="180" align="center" />
          <el-table-column prop="number" label="采购数量" width="180" align="center" />
          <el-table-column prop="trans_number" label="转运数量" width="180" align="center" />
          <el-table-column prop="delivery_date" label="交货日期" width="180" align="center">
            <template slot-scope="scope">
              {{ scope.row.arrive_date | formatDate('{y}-{m}-{d}') }}
            </template>
          </el-table-column>
          <el-table-column prop="goods_name" label="中文名称" width="180" align="center" />
          <el-table-column prop="goods_name_en" label="英文名称" width="180" align="center" />
          <el-table-column prop="container_rate" label="箱率" width="180" align="center" />
          <el-table-column prop="notes" label="备注" width="180" align="center" />
        </el-table>
        <el-row>
          <mainTilte title="转运配件明细信息" />
        </el-row>
        <el-table :data="auditForm.parts" stripe fit border class="mb10">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="purchase_order_code" label="采购单号" width="180" align="center" />
          <el-table-column prop="contract_code" label="合同号" width="180" align="center" />
          <el-table-column prop="goods_code" label="配件编码" width="180" align="center" />
          <el-table-column prop="number" label="采购数量" width="180" align="center" />
          <el-table-column prop="trans_number" label="转运数量" width="180" align="center" />
          <el-table-column prop="delivery_date" label="交货日期" width="180" align="center">
            <template slot-scope="scope">
              {{ scope.row.arrive_date | formatDate('{y}-{m}-{d}') }}
            </template>
          </el-table-column>
          <el-table-column prop="goods_name" label="中文名称" width="180" align="center" />
          <el-table-column prop="container_rate" label="箱率" width="180" align="center" />
          <el-table-column prop="notes" label="备注" width="180" align="center" />
        </el-table>
      </div>
      <div>
        <el-row>
          <mainTilte title="审核" />
        </el-row>
        <el-form ref="form" :model="auditForm" :rules="auditRules" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="" prop="audit_status">
                <el-radio-group v-model="auditForm.audit_status">
                  <el-radio :label="1">通过</el-radio>
                  <el-radio :label="-1">驳回</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col v-if="auditForm.audit_status === -1" :span="16">
              <el-form-item label="驳回原因" prop="audit_notes">
                <el-input v-model="auditForm.audit_notes" type="textarea" autosize />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取消审核</el-button>
        <el-button type="primary" @click="saveData()">确认审核</el-button>
      </span>
    </el-dialog>
    <!-- 预分仓 -->
    <preDistribution ref="preDistribution" @submit="submitHandler" />
    <!-- 到仓确认 -->
    <ArriveConfirm ref="arriveConfirm" @submit="submitHandler" />
    <!-- <arrivalConfirm ref="arrivalConfirm" @submit="submitHandler" /> -->
    <!-- 预分仓确认 -->
    <preDistributionConfirm ref="preDistributionConfirm" @submit="submitHandler" />
    <!-- 详情弹窗 -->
    <waybill-info-dialog ref="infoDialog" />
    <!-- 预分仓详情 -->
    <preDistributionInfoDialog ref="preInfoDialog" />
    <!--下载字段选择-->
    <DownModul :url="exportUrl" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="导出字段选择" :options-modul="optionsModul" />
  </div>
</template>

<script>
import list from '@/layout/mixin/list'
import operationBtnGroup from '@/components/base/operationBtnGroup'
import billForm from './components/billForm'
import preDistribution from './components/preDistribution'
// import arrivalConfirm from './components/arrivalConfirm'
import ArriveConfirm from './components/arriveConfirm'
import preDistributionConfirm from './components/preDistributionConfirm'
import codeItem from '@/components/base/code'
import { action } from '@/directive/permission/index.js' // 权限判断指令
import dicValues from '@/components/dicTransform/index'
import waybillInfoDialog from './components/waybillInfoDialog'
import PreDistributionInfoDialog from './components/preDistributionInfoDialog'
import appText from '@/components/appText/index'
// import { downloadxlsx } from '@/utils/index'
// import productList from '@/components/productList/index'
import cacheList from '@/layout/mixin/cacheList'
import DownModul from '@/components/DownModul/index.vue'
import appHtml from '@/components/appHtml/index'

const DICTIONARIES = {
  auditStatus: [
    // 审核状态 0 待审核 1-审核通过 -1 审核拒绝
    {
      code: 0,
      name: '待审核'
    },
    {
      code: 1,
      name: '审核通过'
    },
    {
      code: -1,
      name: '审核驳回'
    }
  ],
  preDivideList: [
    // 审核状态 0是未分仓 1是已分仓
    {
      code: 0,
      name: '未分仓'
    },
    {
      code: 1,
      name: '已分仓'
    }
  ],
  // 是否预分仓确认
  preDivideConfirmList: [
    {
      code: 0,
      name: '未确认'
    },
    {
      code: 1,
      name: '已确认'
    }
  ]
}
export default {
  name: 'SupplyWaybill',
  components: {
    waybillInfoDialog,
    billForm,
    preDistribution,
    // arrivalConfirm,
    ArriveConfirm,
    preDistributionConfirm,
    PreDistributionInfoDialog,
    DownModul
  },
  directives: {
    action
  },
  mixins: [list, cacheList],
  data() {
    return {
      dialogVisible: false,
      isActive: false,
      formItems: [
        {
          label: '出运单编码',
          key: 'code',
          type: 'input',
          placeholder: '请输入出运单编码'
        },
        {
          label: '提单号',
          key: 'bl_no',
          type: 'input',
          placeholder: '请输入提单号'
        },
        {
          label: '柜号',
          key: 'cabinet_no',
          type: 'input',
          placeholder: '请输入柜号'
        },
        {
          label: '实体仓',
          key: 'warehouse',
          type: 'input',
          placeholder: '请输入实体仓'
        },
        {
          label: '货代',
          key: 'lforwarder_company',
          type: 'input',
          placeholder: '请输入货代'
        },
        {
          label: '审核状态',
          key: 'audit_status',
          type: 'select',
          filterable: true,
          placeholder: '请选择审核状态',
          options: [
            {
              value: 0,
              label: '待审核'
            },
            {
              value: 1,
              label: '审核通过'
            },
            {
              value: -1,
              label: '审核拒绝'
            }
          ]
        },
        {
          label: '是否预分仓',
          key: 'is_sub',
          type: 'select',
          filterable: true,
          placeholder: '请选择',
          options: [
            {
              value: 0,
              label: '否'
            },
            {
              value: 1,
              label: '是'
            }
          ]
        },
        {
          label: '是否到仓确认',
          key: 'arrive_status',
          type: 'select',
          filterable: true,
          placeholder: '请选择',
          options: [
            {
              value: 0,
              label: '否'
            },
            {
              value: 1,
              label: '是'
            }
          ]
        },
        {
          label: '是否预分仓确认',
          key: 'sub_confirm',
          type: 'select',
          filterable: true,
          placeholder: '请选择',
          options: [
            {
              value: 0,
              label: '否'
            },
            {
              value: 1,
              label: '是'
            }
          ]
        },
        {
          label: '起运日期',
          key: 'shipment_date',
          type: 'dataPicker',
          valueFormat: 'yyyy-MM-dd',
          placeholder: '起运日期'
          //   wrap: true
        },
        // arrive_date
        {
          label: '预计到仓日期',
          key: 'arrive_date',
          type: 'dataPicker',
          valueFormat: 'yyyy-MM-dd',
          placeholder: '预计到仓日期'
          //   wrap: true
        }
      ],
      otherHeight: 460,
      componentName: 'SupplyWaybill',
      allAmount: '',
      value: '',
      value1: [],
      loading: false,
      dialogAddVisible: false, // 新增供应商弹框
      title: '',
      loadingText: '',
      rule: {},
      /** *
       * 定义搜索框
       */
      searchParams: {
        page: 1,
        limit: 10, // 默认是10
        totalRows: 0,
        pageSizeX: [10, 20, 30, 40, 50, 100], // 每页显示个数选择器的选项设置
        code: '',
        bl_no: '',
        cabinet_no: '',
        lforwarder_company: '',
        warehouse: '',
        audit_status: '',
        arrive_status: '',
        arrive_date: '',
        shipment_date: '',
        sub_confirm: '',
        is_sub: ''
      },
      statusList: [
        {
          code: 0,
          name: '待审核'
        },
        {
          code: 1,
          name: '审核通过'
        },
        {
          code: -1,
          name: '审核拒绝'
        }
      ],
      /** *
       * 定义显示的表格
       */
      columns: [
        {
          label: '出运单编码',
          prop: 'code',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '提单号',
          prop: 'bl_no',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '柜号',
          prop: 'cabinet_no',
          width: '150',
          align: 'center',
          tooltip: false
        },
        {
          label: '装柜日期',
          prop: 'loading_date',
          width: '150',
          align: 'center',
          tooltip: false
        },
        {
          label: '起运日期',
          prop: 'shipment_date',
          width: '150',
          align: 'center',
          tooltip: false
        },
        {
          label: '实体仓',
          prop: 'entity_warehouse',
          width: '150',
          align: 'center',
          tooltip: false
        },
        {
          label: '预计到仓时间',
          prop: 'arrive_date',
          width: '160',
          align: 'center',
          tooltip: false
        },
        {
          label: '货代',
          prop: 'lforwarder_company_name',
          width: '120',
          align: 'center',
          tooltip: true
        },
        {
          label: '系统sku',
          prop: 'goods_code',
          width: '400',
          align: 'center',
          tooltip: true,
          component: appHtml,
          propsHandler({ row }) {
            const list = row.product_info.map((arr) => {
              return '<div>' + arr.goods_code + '</div>'
            })
            const listString = list.join('<el-divider class="line_style"></el-divider>')
            return { text: listString }
          }
        },
        {
          label: '商品名称',
          prop: 'goods_name',
          width: '400',
          align: 'center',
          tooltip: true,
          component: appHtml,
          propsHandler({ row }) {
            const list = row.product_info.map((arr) => {
              return '<div>' + arr.goods_name + '</div>'
            })
            const listString = list.join('<el-divider class="line_style"></el-divider>')
            return { text: listString }
          }
        },
        // {
        //   label: '系统sku',
        //   width: '200',
        //   align: 'center',
        //   tooltip: false,
        //   component: productList,
        //   propsHandler({ row }) {
        //     return { list: row.codes }
        //   }
        // },
        // {
        //   label: '商品名称',
        //   width: '200',
        //   align: 'center',
        //   tooltip: false,
        //   component: productList,
        //   propsHandler({ row }) {
        //     return { list: row.names }
        //   }
        // },
        // {
        //   label: '系统sku',
        //   width: '200',
        //   align: 'center',
        //   tooltip: false,
        //   component: productList,
        //   propsHandler({ row }) {
        //     return { list: row.codes }
        //   }
        // },
        // {
        //   label: '运输方式',
        //   prop: 'shipment',
        //   width: '100',
        //   align: 'center',
        //   tooltip: false
        // },
        // {
        //   label: '起运港',
        //   prop: 'shipment_port',
        //   width: '100',
        //   align: 'center',
        //   tooltip: false
        // },
        // {
        //   label: '目的港',
        //   prop: 'destination_port',
        //   width: '100',
        //   align: 'center',
        //   tooltip: false
        // },
        {
          label: '审核状态',
          prop: 'audit_status',
          width: '100',
          align: 'center',
          tooltip: false
        },

        {
          label: '审核原因',
          prop: 'audit_notes',
          width: '100',
          align: 'center',
          component: appText,
          propsHandler({ row }) {
            return { text: row.audit_notes }
          }
        },
        {
          label: '是否预分仓',
          prop: 'is_sub',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '是否到仓确认',
          prop: 'arrive_status',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '是否预分仓确认',
          prop: 'sub_confirm',
          width: '100',
          align: 'center',
          tooltip: false
        },
        // {
        //   label: '实体仓',
        //   prop: 'warehouse',
        //   width: '100',
        //   align: 'center',
        //   tooltip: false,
        //   component: appText,
        //   propsHandler({ row }) {
        //     return { text: row.warehouse }
        //   }
        // },
        {
          label: '创建人',
          prop: 'created_by_name',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '创建时间',
          prop: 'created_at',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '修改人',
          prop: 'updated_by_name',
          width: '100',
          align: 'center',
          tooltip: false,
          component: appText,
          propsHandler({ row }) {
            return { text: row.updated_by_name }
          }
        },
        {
          label: '修改时间',
          prop: 'updated_at',
          width: '200',
          align: 'center',
          tooltip: false
        }
      ],
      /** *
       * 字典表组件
       */
      columnsSchema: {
        出运单编码: {
          propsHandler({ col, row }) {
            return {
              code: row.code
            }
          },
          listeners: {
            click: this.toInfo
          },
          component: codeItem
        },
        审核状态: {
          propsHandler({ col, row }) {
            return {
              dictionaries: DICTIONARIES['auditStatus'],
              code: row[col.prop]
            }
          },
          component: dicValues
        },
        是否预分仓: {
          propsHandler({ col, row }) {
            return {
              dictionaries: DICTIONARIES['preDivideList'],
              code: row[col.prop]
            }
          },
          component: dicValues
        },
        是否预分仓确认: {
          propsHandler({ col, row }) {
            return {
              dictionaries: DICTIONARIES['preDivideConfirmList'],
              code: row[col.prop],
              id: row.id,
              clickAbled: true
            }
          },
          listeners: {
            click: this.showPreList
          },
          component: dicValues
        },
        是否到仓确认: {
          propsHandler({ col, row }) {
            return {
              dictionaries: DICTIONARIES['preDivideConfirmList'],
              code: row[col.prop]
            }
          },
          component: dicValues
        }
      },
      issignContract: [
        {
          name: '出运单编码',
          code: 'code'
        },
        // {
        //   name: '供应商名称',
        //   code: 'supplierName'
        // },
        //
        {
          name: '提单号',
          code: 'bl_no'
        },
        {
          name: '柜号',
          code: 'cabinet_no'
        },
        {
          name: '实体仓',
          code: 'warehouse'
        }
      ],
      formData: {
        id: null,
        supplierCode: null, // 供应商代码
        supplierName: null, // 供应商名称
        settlementCycle: null, // 结算周期
        buyer: null, // 采购员
        contacts: '', // 联系人
        phone: null, // 联系人手机
        fixedTelephone: null, // 固定电话
        fax: null, // 传真
        // address: null, // 地址
        postcode: null, // 邮编
        payment: null, // 预付款比例
        notes: null, // 备注说明
        number: null
      },
      dictionaries: {},
      bareData: [],
      bareColumn: [
        {
          label: '币别',
          prop: 'suppierCode',
          align: 'center',
          minWidth: 50,
          tooltip: false
        },
        {
          label: '开户行',
          prop: 'suppierCode',
          align: 'center',
          minWidth: 50,
          tooltip: false
        },
        {
          label: '银行账号',
          prop: 'suppierCode',
          align: 'center',
          minWidth: 50,
          tooltip: false
        }
      ],
      bareColumnsSchema: {},
      loadingBare: false,
      roleCodeRule: {
        supplierCode: [
          { required: true, message: '供应商代码不能为空', trigger: 'blur' }
        ],
        supplierName: [
          { required: true, message: '供应商名称不能为空', trigger: 'blur' }
        ],
        settlementCycle: [
          { required: true, message: '结算周期不能为空', trigger: 'blur' }
        ],
        contacts: [
          { required: true, message: '联系人不能为空', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '联系人手机不能为空', trigger: 'blur' }
        ]
      },
      bareList: [
        {
          suppierCode: '000',
          chineseName: '11',
          enName: '11',
          suppier: '11',
          rate: '11',
          number: '11',
          unitPrice: '11',
          purchaseAmount: '11',
          demandTime: '11',
          date: '11',
          tip: '11',
          img: require('../../../assets/home/list 15@2x.png')
        }
      ],
      dialogPreVisible: false, // 预分仓弹框
      dialogArrivalVisible: false, // 到仓确认弹框
      dialogPreDistribution: false, // 预分仓确认弹框
      auditForm: {
        audit_status: null,
        audit_notes: null
      },
      auditRules: {
        audit_notes: [
          { required: true, message: '请输入审核意见', trigger: 'blur' },
          { max: 500, message: '审核意见必须在500个字符以内', trigger: 'blur' }
        ]
      },
      shipment: [], // 运输方式 list
      shipment_port: [], // 起运港 list
      destination_port: [], // 目的港 list
      exportLoading: false,
      exportUrl: '/transhipment-order/order/export',
      cachePaths: [
        '/supplyChain/waybill/edit'
      ],
      formVisibleDown: false,
      downLoadParams: {},
      optionsModul: [
        {
          key: 'loading_date',
          label: '装柜日期'
        },
        {
          key: 'code',
          label: '商品编码'
        },
        {
          key: 'name_ch',
          label: '中文名称'
        },
        {
          key: 'container_rate',
          label: '箱率'
        },
        {
          key: 'trans_number',
          label: '转运数量'
        },
        {
          key: 'shipment_port_text',
          label: '起运港'
        },
        {
          key: 'destination_port_text',
          label: '目的港'
        },
        {
          key: 'lcl_type_text',
          label: '拼柜类型'
        },
        {
          key: 'cabinet_no',
          label: '柜号'
        },
        {
          key: 'seal_no',
          label: '封箱号'
        },
        {
          key: 'ships_name',
          label: '船名航次'
        },
        {
          key: 'lforwarder_company_name',
          label: '货代'
        },
        {
          key: 'shipment_date',
          label: '起运日期'
        },
        {
          key: 'arrive_date',
          label: '预计到仓日期'
        },
        {
          key: 'bl_no',
          label: '提单号'
        },
        {
          key: 'notes',
          label: '备注'
        }
      ]
    }
  },
  created() {
    // 调用全局混合方法 第一个参数是请求地址对应的名称（api.js），第二个为参数
    this.getDic()
  },
  activated() {
    this.query()
  },
  mounted() {
    this.allAmount = '采购总金额:' + 10
  },
  methods: {
    // 导出
    handleExport() {
      const vm = this
      const { code, bl_no, cabinet_no, lforwarder_company, warehouse, audit_status, is_sub, arrive_status,
        sub_confirm, arrive_date, shipment_date } = vm.searchParams
      const params = {
        audit_status, shipment_date,
        code, bl_no, cabinet_no, lforwarder_company, warehouse, is_sub, arrive_status, sub_confirm, arrive_date
      }
      // if (type) {
      //   params[type] = value
      // }
      // vm.handleExportxlsx(vm.exportUrl, params)
      vm.downLoadParams = params
      vm.formVisibleDown = true
    },
    // handleExport() {
    //   const vm = this
    //   vm.exportLoading = true
    //   const { type, value, audit_status } = vm.searchParams
    //   const params = { audit_status }
    //   if (type) {
    //     params[type] = value
    //   }
    //   vm.$http.get(vm.exportUrl, { params }).then(res => {
    //     downloadxlsx(res.data)
    //     vm.exportLoading = false
    //   }).catch(() => {
    //     vm.exportLoading = false
    //   })
    // },
    // 显示预分仓
    showPreList(id) {
      const vm = this
      vm.$refs.preInfoDialog.show(id)
    },
    // 获取字典
    getDic() {
      const vm = this
      const dicParams = [
        {
          type: 'transport',
          colume: 'shipment',
          key: 'shipment',
          name: '运输方式'
        },
        {
          type: 'port',
          colume: 'shipment_port',
          key: 'shipment_port',
          name: '起运港'
        },
        {
          type: 'destination',
          colume: 'destination_port',
          key: 'destination_port',
          name: '目的港'
        }
      ]
      const promiseArr = dicParams.map(e => {
        return new Promise((resolve, reject) => {
          vm.$cache
            .getDic(e.type)
            .then(res => {
              resolve({
                data: res,
                key: e.key
              })
            })
            .catch(err => {
              reject(err)
            })
        })
      })
      Promise.all(promiseArr).then(res => {
        res.forEach(e => {
          vm[e.key] = e.data
        })
        vm.query()
      })
    },
    // 去详情
    toInfo(code) {
      const vm = this
      const item = vm.tableData.find(e => e.code === code)
      vm.$refs.infoDialog.show({ id: item.id })
    },
    // 搜索
    handleSearch() {
      const vm = this
      vm.searchParams.page = 1
      vm.query()
    },
    // 刷新
    handleRefresh() {
      const vm = this
      vm.searchParams.page = 1
      vm.searchParams.limit = 10
      vm.searchParams.code = ''
      vm.searchParams.bl_no = ''
      vm.searchParams.cabinet_no = ''
      // lforwarder_company
      vm.searchParams.lforwarder_company = ''
      vm.searchParams.warehouse = ''
      vm.searchParams.audit_status = ''
      vm.searchParams.is_arrive = ''
      vm.searchParams.arrive_date = ''
      vm.searchParams.shipment_date = ''
      vm.searchParams.is_sub = ''
      vm.searchParams.sub_confirm = ''
      vm.searchParams.arrive_status = ''

      vm.query()
    },
    // 出运单审核
    bulkShipment() {
      const that = this
      const dataLength = that.checkedList.length
      if (dataLength === 0) {
        that.$message.error('最少选择一条数据')
        return false
      }
      if (dataLength > 1) {
        that.$message.error('最多选择一条数据')
        return false
      }
      // 判断出运单待审核
      if (that.checkedList[0].audit_status !== 0 && that.checkedList[0].audit_status !== -1) {
        return that.$message.error('所选数据必须是待审核或审核驳回状态')
      }
      that.dialogAddVisible = true
      that.dialogVisible = true
      that.auditForm = {}
      that.auditForm.audit_status = 1
      that.auditForm.audit_notes = ''
      that.getSupplierList()
    },
    // 获取
    getSupplierList() {
      this.$http
        .get(`/transhipment-order/${this.checkedList[0].id}`)
        .then(res => {
          if (res.code === 10000) {
            this.auditForm = Object.assign(res.data, this.auditForm)
          }
          this.dialogVisible = false
        })
        .catch(() => {
          this.loading = false
          this.dialogVisible = false
        })
    },
    // 新增-保存
    saveData() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const params = {
            id: this.checkedList[0].id,
            audit_status: this.auditForm.audit_status,
            audit_notes: this.auditForm.audit_notes
          }
          this.$http
            .post(`/transhipment-order/change-audit-status`, params)
            .then(res => {
              if (res.code === 10000) {
                this.$message.success('审核成功')
                this.query()
                this.dialogAddVisible = false
              }
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    },
    // 预分仓处理 提交成功 handler
    submitHandler() {
      const vm = this
      vm.query()
    },
    // 点击预分仓按钮
    openList() {
      const that = this
      const dataLength = that.checkedList.length
      if (dataLength === 0) {
        that.$message.error('最少选择一条数据')
        return false
      }
      if (dataLength > 1) {
        that.$message.error('最多选择一条数据')
        return false
      }
      // 判断 审核通过 且 未预分仓 状态
      const checkStatusdAndNoPre = () =>
        that.checkedList[0].audit_status === 1 &&
        that.checkedList[0].is_sub === 0
      if (checkStatusdAndNoPre()) {
        that.$refs.preDistribution.show(that.checkedList[0].id)
      } else {
        return that.$message.error('所选数据必须是审核通过且未分仓')
      }
    },
    // 点击到仓确认按钮
    arrivalClick() {
      const that = this
      const dataLength = that.checkedList.length
      if (dataLength === 0) {
        that.$message.error('最少选择一条数据')
        return false
      }
      if (dataLength > 1) {
        that.$message.error('最多选择一条数据')
        return false
      }
      // 判断 是
      const checkStatusdAndPre = () =>
        that.checkedList[0].audit_status === 1 &&
        that.checkedList[0].is_sub === 1 &&
        that.checkedList[0].sub_confirm === 0 &&
        that.checkedList[0].arrive_status === 0
      if (!checkStatusdAndPre()) {
        return that.$message.error('所选数据必须是已预分仓且未到仓确认')
      }
      // that.$refs.arrivalConfirm.show(that.checkedList[0].id)
      that.$refs.arriveConfirm.show(that.checkedList[0].id)
    },
    // 预分仓确认
    preDistributionClick() {
      const that = this
      const dataLength = that.checkedList.length
      if (dataLength === 0) {
        that.$message.error('最少选择一条数据')
        return false
      }
      if (dataLength > 1) {
        that.$message.error('最多选择一条数据')
        return false
      }
      // 是否是已经预分仓
      const checkStatusdAndPre = () =>
        that.checkedList[0].audit_status === 1 &&
        that.checkedList[0].is_sub === 1 &&
        that.checkedList[0].arrive_status === 1 &&
        that.checkedList[0].sub_confirm === 0
      if (!checkStatusdAndPre()) {
        return that.$message.error('所选数据必须是已到仓确认且未预分仓确认')
      }
      that.$refs.preDistributionConfirm.show(that.checkedList[0].id)
    },
    handleSizeChange(val) {
      this.searchParams.limit = val
      this.query()
    },
    handleCurrentChange(val) {
      this.searchParams.page = val
      this.query()
    },
    query() {
      const vm = this
      let url = '/transhipment-order'
      const { page, limit, code, bl_no, cabinet_no, lforwarder_company, warehouse,
        audit_status, arrive_status, arrive_date, shipment_date, is_sub, sub_confirm } = this.searchParams
      url += `?page=${page}&limit=${limit}&audit_status=${audit_status}&arrive_status=${arrive_status}&is_sub=${is_sub}&sub_confirm=${sub_confirm}`
      if (code) {
        url += `&code=${code}`
      }
      if (bl_no) {
        url += `&bl_no=${bl_no}`
      }
      if (cabinet_no) {
        url += `&cabinet_no=${cabinet_no}`
      }
      if (warehouse) {
        url += `&warehouse=${warehouse}`
      }
      if (lforwarder_company) {
        url += `&lforwarder_company=${lforwarder_company}`
      }
      if (arrive_date) {
        url += `&arrive_date=${arrive_date}`
      }
      if (shipment_date) {
        url += `&shipment_date=${shipment_date}`
      }
      const keys = ['shipment', 'shipment_port', 'destination_port']
      const filterKeys = (item) => {
        const obj = {}
        keys.forEach(e => {
          const findItem = vm[e].find(ele => ele.id.toString() === item[e])
          obj[e] = findItem ? findItem.dict_data_name : item[e]
        })
        return obj
      }
      vm.initTableData(url, null, (data) => {
        vm.tableData = data.map(e => {
          const filterKey = filterKeys(e)
          for (const key in filterKey) {
            e[key] = filterKey[key]
          }
          e['names'] = e.product_info.map(e => e.goods_name)
          e['codes'] = e.product_info.map(e => e.goods_code)
          return e
        })
      })
    },

    // 自定义操作栏
    columnsHandler(cols) {
      const that = this
      return cols.concat({
        width: '100',
        label: '操作',
        align: 'center',
        fixed: 'left',
        propsHandler({ row }) {
          return {
            row,
            edit: row.audit_status !== 1,
            editAction: 'transhipmentOrder@update',
            del: false
          }
        },
        component: operationBtnGroup,
        // listeners 可用于监听自定义组件内部 $emit 出的事件
        listeners: {
          editTableClick(row) {
            that.$router.push({
              path: '/supplyChain/waybill/edit',
              query: { id: row.id }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.minheight-400 {
  height: 400px;
  overflow-y: auto;
}
</style>
